<template>
  <div class="good-item-div">
    <div class="good-item">
      <img :src="good.logoImg" @click="showDetail">
      <div class="good-item-right">
        <div class="good-name" @click="showDetail"><span v-if="good.isHot === 1" style="background-color: red; font-size:10px;padding: 2px 4px;color: white;border-radius: 3px;"><van-icon color="white" name="fire" /></span>
          {{ good.goodName }}
        </div>
        <div class="good-tag">
          <template v-for="(item,index) in goodTag" v-bind:key="'good' + item.id">
            <van-tag v-if="index===0" size="medium" style="margin:5px;" type="primary">{{ item }}</van-tag>
            <van-tag v-else-if="index===1" size="medium" style="margin:5px;" type="warning">{{ item }}</van-tag>
            <van-tag v-else-if="index===2" size="medium" style="margin:5px;" type="success">{{ item }}</van-tag>
            <van-tag v-else-if="index===3" size="medium" style="margin:5px;" type="danger">{{ item }}</van-tag>
            <van-tag v-else size="medium" type="primary" style="margin:5px;">{{ item }}</van-tag>
          </template>
        </div>
        <!-- <div class="good-supplier">{{ good.parentName }}</div> -->
        <div class="commission-rule">
          <van-button plain hairline type="primary" size="small" style="float: right;" @click="editZl">编辑资料</van-button>
          <van-button type="primary" size="small" style="margin-right: 5px;float: right;" @click="showDetailOnclick">详情</van-button>
        </div>
      </div>
      <div style="width: 100%;height: 5px;clear: both;"></div>
    </div>
    <div style="width: 100%;height: 8px;clear: both;border-bottom: 1px solid #e5e5e5;"></div>
    <!-- <div class="good-item-button">

    </div>
    <div style=" width: 100%;height: 10px;clear: both;">
    </div> -->

    <!--修改-->
    <div class="admin-dlalog-shadow" v-if="addOrUpdateDlglog"></div>
    <div class="admin-dlalog" v-if="addOrUpdateDlglog">
      <div class="admin-dlalog-content">
        <div class="admin-dlalog-title-x">{{addOrUpdateDlglogTitle}}</div>
        <div class="admin-dlalog-body" style="padding:0;margin:0;">
          <van-icon name="cross" @click="addOrUpdateDlglog = false" style="position: absolute;right: 8px;top:8px; margin-top: 10px;font-size: 20px;margin-right: 10px;" />
          <van-form @submit="onSubmitForm">
            <div class="asheng-custom-dlglog-content" style="height: 370px;overflow-y: auto;">
              <row-content :bold="true" title="套餐名称" :content="form.gn" />
              <van-cell-group>
                <!-- <van-field label-width="60px" v-model="form.tcname" name="套餐名字" label="套餐名字" placeholder="请输入套餐名字" />
                <van-field label-width="60px" v-model="form.tczf" name="套餐资费" label="套餐资费" placeholder="请输入套餐资费" />
                <van-field label-width="60px" v-model="form.tcll" name="套餐流量" label="套餐流量" placeholder="请输入套餐流量" />
                <van-field label-width="60px" v-model="form.scqd" name="首冲渠道" label="首冲渠道" placeholder="请输入首冲渠道" /> -->
                <van-field label-width="60px" v-model="form.belongAddress" name="套餐归属" label="套餐归属" placeholder="请输入套餐归属" />
                <van-field label-width="60px" v-model="form.psType" name="配送方式" label="配送方式" placeholder="请输入配送方式" />
                <van-field label-width="60px" v-model="form.activedType" name="开卡方式" label="开卡方式" placeholder="请输入开卡方式" />
                <van-field label-width="60px" v-model="form.firstAddChannel" name="首冲渠道" label="首冲渠道" placeholder="请输入首冲渠道" />
                <van-field label-width="60px" v-model="form.ageLimit" name="年龄限制" label="年龄限制" placeholder="请输入年龄限制" />
                <van-field label-width="60px" v-model="form.packageDuration" name="套餐合约" label="套餐合约" placeholder="请输入套餐合约" />
                <van-field label-width="60px" v-model="form.againActivedType" name="违停复机" label="违停复机" placeholder="请输入违停复机" />
                <van-field label-width="60px" v-model="form.publicizeChannel" name="宣传渠道" label="宣传渠道" placeholder="请输入宣传渠道" />
                <van-field label-width="60px" type="textarea" rows="2" v-model="form.packageComposition" name="套餐构成" label="套餐构成" placeholder="请输入套餐构成" />
                <van-field label-width="60px" type="textarea" rows="2" v-model="form.prohibitArea" name="禁发区域" label="禁发区域" placeholder="请输入禁发区域" />
                <van-field label-width="60px" type="textarea" rows="2" v-model="form.remark" name="其它备注" label="其它备注" placeholder="请输入其它备注" />
                <van-field label-width="60px" type="textarea" rows="2" v-model="form.resultRule" name="结算规则" label="结算规则" placeholder="请输入结算规则" />
                <van-field label-width="60px" name="advUploader" label="激活图片">
                  <template #input>
                    <van-uploader v-model="form.activityImgUrlList" :max-count="maxCount" :preview-size="[100, 100]" :before-read="activityReadBeforeHandle" :after-read="activityReadAfterHandle" />
                  </template>
                </van-field>
                <template v-for="(row,index) in tags" :key="'row'+index">
                  <van-field label-width="60px" :label="row.name">
                    <template #input>
                      <template v-for="(item,cindex) in row.items" :key="item.val">
                        <van-tag style="margin:5px;" @click="tagClick(index,cindex)" v-if="item.checked" size="large" type="primary">{{item.name}}</van-tag>
                        <van-tag style="margin:5px;" @click="tagClick(index,cindex)" v-else size="large" color="#f1f1f1" text-color="#aaa">{{item.name}}</van-tag>
                      </template>
                    </template>
                  </van-field>
                </template>
              </van-cell-group>
            </div>
            <div style="margin: 16px;">
              <van-button round block type="primary" native-type="submit">
                保 存
              </van-button>
            </div>
          </van-form>
        </div>
      </div>
    </div>
    <!-- <div v-show="addOrUpdateDlglog" class="asheng-custom-dlglog">
      <div class="asheng-custom-dlglog-inner" style="height: 485px;">
        <div class="asheng-custom-dlglog-title">{{ addOrUpdateDlglogTitle }}</div>

      </div>
    </div> -->
    <!--修改-->

    <!--详情-->
    <div class="admin-dlalog-shadow" v-if="detailDlglog" @click="detailDlglog = false"></div>
    <div class="admin-dlalog" v-if="detailDlglog">
      <div class="admin-dlalog-content">
        <div class="admin-dlalog-title-x">资料详情</div>
        <div class="admin-dlalog-body" style="padding:0;margin:0;">
          <row-content :bold="true" title="套餐名称" :content="detail.goodName" />
          <!-- <row-content title="套餐名字" :content="detail.tcname"></row-content>
          <row-content title="套餐资费" :content="detail.tczf"></row-content>
          <row-content title="套餐流量" :content="detail.tcll"></row-content>
          <row-content title="首冲渠道" :content="detail.scqd"></row-content> -->
          <row-content title="套餐归属" :content="detail.belongAddress"></row-content>
          <row-content title="配送方式" :content="detail.psType"></row-content>
          <row-content title="开卡方式" :content="detail.activedType"></row-content>
          <row-content title="首冲渠道" :content="detail.firstAddChannel"></row-content>
          <row-content title="年龄限制" :content="detail.ageLimit"></row-content>
          <row-content title="套餐合约" :content="detail.packageDuration"></row-content>
          <row-content title="违停复机" :content="detail.againActivedType"></row-content>
          <row-content title="宣传渠道" :content="detail.publicizeChannel"></row-content>
          <row-content title="套餐构成" :content="detail.packageComposition"></row-content>
          <row-content title="禁发区域" :content="detail.prohibitArea"></row-content>
          <row-content title="其它备注" :content="detail.remark"></row-content>
          <row-content title="结算规则" :content="detail.resultRule"></row-content>
          <row-content title="激活图片" :content="''" v-if="detail.activityImgUrlList && detail.activityImgUrlList.length > 0">
            <template #content>
              <div v-if="detail.activityImgUrlList && detail.activityImgUrlList.length > 0">
                <div v-for="img in detail.activityImgUrlList" :key="img.url">
                  <img :src="img.url" style="width: 100%;" />+
                </div>
              </div>
            </template>
          </row-content>
          <template v-for="(row,index) in tags" :key="'row'+index">
            <row-content label-width="60px" :title="row.name">
              <template #content>
                <template v-for="item in row.items" :key="item.val">
                  <van-tag style="margin:5px;" v-if="item.checked" size="large" type="primary">{{item.name}}</van-tag>
                </template>
              </template>
            </row-content>
          </template>
        </div>
      </div>
    </div>
    <!--详情-->
  </div>
</template>

<script>
import { getGoodinfo, updateGoodinfo } from '@/api/admin/goodinfo'
import { adminUploadFile } from '@/utils/upload'
import { showToast } from 'vant'
import RowContent from '@/components/RowContent'

export default {
  name: 'ZlGoodItem',
  props: {
    good: Object,
    index: Number,
    t1: Array,
    t2: Array,
    t3: Array,
    t4: Array,
  },
  components: {
    RowContent,
  },
  created() {
    if (this.good.tagName) {
      this.goodTag = JSON.parse(this.good.tagName)
    }
    this.form.id = this.good.id
  },
  data() {
    return {
      goodTag: [],
      form: {
        activityImgUrlList: [],
      },
      addOrUpdateDlglog: false,
      addOrUpdateDlglogTitle: '编辑资料信息',
      maxCount: 10,
      detailDlglog: false,
      detail: {},
      tags: [],
    }
  },
  methods: {
    restGoodPageData() {
      this.$emit('restGoodPageData')
    },
    editZl() {
      getGoodinfo(this.form.id).then((res) => {
        if (res.code == 200) {
          let v = res.data
          this.form.gn = v.goodName
          this.form.tcname = v.tcname
          this.form.tczf = v.tczf
          this.form.tcll = v.tcll
          this.form.scqd = v.scqd
          this.form.id = v.id
          this.form.belongAddress = v.belongAddress
          this.form.activedType = v.activedType
          this.form.firstAddChannel = v.firstAddChannel
          this.form.ageLimit = v.ageLimit
          this.form.packageDuration = v.packageDuration
          this.form.againActivedType = v.againActivedType
          this.form.publicizeChannel = v.publicizeChannel
          this.form.packageComposition = v.packageComposition
          this.form.prohibitArea = v.prohibitArea
          this.form.resultRule = v.resultRule
          this.form.zlUpdateDate = v.zlUpdateDate
          this.form.activityImgUrl = v.activityImgUrl
          this.form.psType = v.psType
          this.form.sortNum = v.sortNum
          this.form.visitNum = v.visitNum
          this.form.activityImgUrlList = v.activityImgUrlList
          this.form.remark = v.remark
          this.addOrUpdateDlglog = true
          //设置标签
          this.tags = [
            { name: '激活类型', items: this.fmTag(this.t1, v.tags) },
            { name: '年龄', items: this.fmTag(this.t2, v.tags) },
            { name: '月租', items: this.fmTag(this.t3, v.tags) },
            { name: '特殊', items: this.fmTag(this.t4, v.tags) },
          ]
        } else {
          showToast(res.msg)
        }
      })
    },
    tagClick(index, cindex) {
      this.tags[index].items[cindex].checked =
        !this.tags[index].items[cindex].checked
      this.form.tags = this.tags
        .filter((t) => {
          return t.items
            .filter((i) => {
              return i.checked
            })
            .map((i) => {
              return i.val
            })
            .join(',')
        })
        .map((t) => {
          return t.items
            .filter((i) => {
              return i.checked
            })
            .map((i) => {
              return i.val
            })
            .join(',')
        })
        .join(',')
    },
    showDetailOnclick() {
      getGoodinfo(this.form.id).then((res) => {
        if (res.code == 200) {
          this.detail = res.data
          this.detailDlglog = true
          //设置标签
          this.tags = [
            { name: '激活类型', items: this.fmTag(this.t1, this.detail.tags) },
            { name: '年龄', items: this.fmTag(this.t2, this.detail.tags) },
            { name: '月租', items: this.fmTag(this.t3, this.detail.tags) },
            { name: '特殊', items: this.fmTag(this.t4, this.detail.tags) },
          ]
        } else {
          showToast(res.msg)
        }
      })
    },
    fmTag(dict, str) {
      let strs = []
      if (str) {
        strs = str.split(',')
      }
      let res = []
      dict.forEach((d) => {
        let item = {
          name: d.dictLabel,
          val: d.dictValue,
          checked: strs.indexOf(d.dictValue) > -1,
        }
        res.push(item)
      })
      return res
    },
    onSubmitForm() {
      //showToast("还没做")
      updateGoodinfo(this.form).then((res) => {
        if (res.code == 200) {
          this.addOrUpdateDlglog = false
          showToast('编辑保存成功')
        } else {
          showToast(res.msg)
        }
      })
    },
    activityReadBeforeHandle(file) {
      console.info('文件', file)
      let that = this
      adminUploadFile(file, function (res) {
        let img = { url: res, isImage: true }
        that.form.activityImgUrlList.push(img)
        console.info('的点点滴滴', that.form.activityImgUrlList)
      })
    },
    activityReadAfterHandle(file) {
      console.info('文件2', file)
    },
  },
}
</script>
<style scoped>
.good-item-div {
  padding: 20px 20px 0px;
  background-color: white;
  overflow: hidden;
}

.good-item img {
  width: 100px;
  height: 100px;
  float: left;
  margin-right: 10px;
  border-radius: 5px;
}

.good-item .good-name {
  color: #333333ff;
  font-size: 18px;
  line-height: 22px;
  font-weight: bold;
}

.good-supplier {
  margin-top: 3px;
  font-size: 14px;
}

.commission-rule {
  margin-top: 8px;
  font-size: 14px;
  color: #ff1111;
}

.good-item-button {
  border-bottom: 1px solid #f1f1f1;
  height: 40px;
}
</style>